<template>
  <div class="layoutCon">
    <div class="breadcrumb">
      <router-link class="home" to="/"></router-link> > <router-link to="/my">마이페이지</router-link> > 이력서 관리
    </div>
    <div class="layoutMy">
      <user-center-nav></user-center-nav>
      <div class="myCon">
        <div class="comList">
          <div class="tit">
            <h2>이력서 관리</h2>
            <div class="dropdown">
              <span>이력서 등록하기</span>
              <div class="sub">
                <a href="javascript:;" target="_self" @click="createCV">새로 작성하기</a>
                <a href="javascript:;" target="_self" @click="showBox">이력서 복사하기</a>
              </div>
            </div>
          </div>
          <div class="loadList" v-loading="pageConfig.loading&&pageConfig.page==1">
            <ul v-if="listData.length">
              <li v-for="(item,index) in listData" :key="item.index">
                <div class="time">
                  <em v-if="item.status==0" class="red">작성중</em>
                  <em v-else>작성완료</em>
                  {{item.updated_at}}
                </div>
                <strong>{{item.title}}</strong>
                <el-button v-if="item.status==0" type="primary" class="r" @click="editCV(item.id)">완성하기</el-button>
                <el-button v-else class="r btn" :loading="item.isLoading" @click="openCV(item.id,index)">보기/수정하기</el-button>
              </li>
            </ul>
            <div class="notData" v-if="!pageConfig.loading&&listData.length==0">이력서를 등록해주세요.</div>
            <div class="loadMore" v-if="!pageConfig.isAll">
              <el-button type="primary" :loading="pageConfig.loading" @click="loadMore" class="btnMore">더보기</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog class="dialogMini" title="이력서 복사하기" :closeOnClickModal="false" :visible.sync="showOps">
      <div class="boxfrm">
        <el-form :model="frm" :rules="rules" ref="changeFrm">
          <el-form-item prop="cv_id">
            <label class="tit">복사하실 이력서를 선택해주세요.</label>
            <el-select style="width:100%" placeholder="선택해주세요." v-model="frm.cv_id">
              <el-option :label="item.title" :value="item.id" v-for="(item,index) in listData" :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="miniFooter">
        <el-button type="primary" :loading="isLoading" @click="submitForm('changeFrm')">복사하기</el-button>
        <el-button class="esc" @click="showOps = false">취소</el-button>
      </div>
    </el-dialog>
    <recruit-card type="userCenter" :cardParams="cardData" :allJobs="allJobs" @editCV="editCV" @changeLoad="changeLoad"></recruit-card>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex"
import { myCvList, myCvCopy, myCreateCv, jobOption} from '@/api'
import userCenterNav from '@/components/userCenterNav'
import recruitCard from '@/components/recruitCard'

export default {
  name:'',
  components:{userCenterNav,recruitCard},
  props:[],
  data(){
    return {
      pageConfig:{
        page:1,
        per:10,
        loading:false,
        isAll:true
      },
      isLoading:false,
      showOps:false,
      listData:[],
      allJobs:[],
      cardData:null,
      curIndex:-1,
      frm:{
        cv_id:''
      },
      rules:{
        cv_id: [
            { required: true, message: '복사하실 이력서를 선택해주세요.', trigger: 'change' }
        ],
      },
    }
  },
  computed:{},
  created(){
    this.getCVList();
  },
  mounted(){},
  methods:{
    async getCVList(){
      this.pageConfig.loading=true;
      let res = await myCvList({page:this.pageConfig.page,per:this.pageConfig.per});
        if (res.code == 200) {
          this.pageConfig.page+=1;
          let _arry=res.data.data;
          if(_arry.length){
            _arry.forEach((o)=>{
              o.isLoading=false;
            })
            this.listData=this.listData.concat(_arry);
          }
          !res.data.next_page_url?(this.pageConfig.isAll=true):(this.pageConfig.isAll=false);
          this.pageConfig.loading=false;
        }else{
          this.pageConfig.loading=false;
        }
    },
    loadMore(){
      !this.pageConfig.loading&&this.getCVList();
    },
    createCV(){
      this.$router.push('/my/cv/manager?type=new')
    },
    showBox(){
      this.showOps=true;
    },
    submitForm(formName) {
      this.$refs[formName].validate( async (valid,error) => {
        if (valid) {
          this.isLoading=true;
          let res = await myCvCopy(this.frm);
          try {
            if(res.code==200){
              this.$alert('복사 성공', '알림', {
                confirmButtonText: '확인',
                callback: action => {
                  this.isLoading=false;
                  this.showOps=false;
                  this.editCV(res.data.id);
                }
              });
              this.isLoading=false;
            }
          } catch (error) {
            this.isLoading=false;
          }
        } else {
          this.isLoading=false;
          return false;
        }
      });
    },
    editCV(id){
      this.$router.push({path:'/my/cv/manager',query:{cv_id:id}})
    },
    openCV(id,index){
      this.curIndex>-1&&(this.listData[this.curIndex].isLoading=false);
      this.curIndex=index;
      this.listData[index].isLoading=true;
      this.cardData={
        isShow:true,
        id:id
      }
    },
    changeLoad(){
      this.listData[this.curIndex].isLoading=false;
    }
  },
  watch:{}
}
</script>
<style lang="scss" scoped>
 @import "@/assets/styles/my.scss";
</style>
